<template>
  <div>
    <el-container>
      <el-main>
        <div style="height: 190px;background: #FFFFFF;border-radius: 10px;box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.1);">
          <el-row>
            <el-col :span="18" style="line-height: 40px;padding-left: 40px;">
              <div style="margin-top: 20px;">
                <div><span style="font-size: 15px;color: #606266;font-weight: 500;">今日学习人数</span></div>
                <div><span style="font-size: 23px;font-weight: 900;">{{toDayInfo.nowDayPeople}}人</span></div>
              </div>
              <div style="height:80px;line-height:60px;color:#82848a">
                <span>较昨日</span><span style="font-size: 18px;font-weight:800;" :class="[toDayInfo.studyPeopleDiff>=0 ? 'redClass': 'greenClass']" >&nbsp;<span v-show="toDayInfo.studyPeopleDiff>=0">+&nbsp;</span>{{toDayInfo.studyPeopleDiff}}</span>
                <span>&nbsp;|&nbsp;</span>
                <span>昨日&nbsp;</span><span style="font-size: 16px;font-weight:600;color: #6e6464dd;">{{toDayInfo.yesDayPeople}}人</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="peopleTotal">
                <img  style="width: 50px;height: 50px;margin-top: 16px;" src="../../assets/bussiness/home/peopleTotal.png"/>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>

      <el-main>
        <div style="height: 190px;background: #FFFFFF;border-radius: 10px;box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.1);">
          <el-row>
            <el-col :span="18" style="line-height: 40px;padding-left: 40px;">
              <div style="margin-top: 20px;">
                <div><span style="font-size: 15px;color: #606266;font-weight: 500;">累计学习时长</span></div>
                <div><span style="font-size: 23px;font-weight: 900;">{{formatSeconds(toDayInfo.nowDayStudyTime)}}</span></div>
              </div>
              <div style="height: 80px; line-height:60px;color:#82848a">
                <span>较昨日</span><span style="font-size: 16px;font-weight:800;" :class="[toDayInfo.studyTimePercentDiff>=0 ? 'redClass': 'greenClass']">&nbsp;<span v-show="toDayInfo.studyTimePercentDiff>=0">+&nbsp;</span>{{toDayInfo.studyTimePercentDiff}}%</span>
                <span>&nbsp;|&nbsp;</span>
                <span>昨日&nbsp;</span><span  style="font-size: 16px;font-weight:600;color: #6e6464dd;">{{formatSeconds(toDayInfo.yesDayStudyTime)}}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="peopleTotal" style="background: #5e7ec866;" align="center">
                <img  style="width: 50px;height: 50px;margin-top: 15px;" src="../../assets/bussiness/home/totalTime.png"/>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>
      <el-main>
        <div style="height: 190px;background: #FFFFFF;border-radius: 10px;box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.1);">
          <el-row>
            <el-col :span="18" style="line-height: 40px;padding-left: 40px;">
              <div style="margin-top: 20px;">
                <div><span style="font-size: 15px;color: #606266;font-weight: 500;">人均学习时长</span></div>
                <div><span style="font-size: 23px;font-weight: 900;">{{formatSeconds(toDayInfo.todayStudyTimeAvg)}}</span></div>
              </div>
              <div style="height: 80px; line-height:60px;color:#82848a">
                <span>较昨日</span><span style="font-size: 16px;font-weight:800;" :class="[toDayInfo.studyAvgTimePercentDiff>=0 ? 'redClass': 'greenClass']">&nbsp;<span v-show="toDayInfo.studyAvgTimePercentDiff>=0">+&nbsp;</span>{{toDayInfo.studyAvgTimePercentDiff}}%</span>
                <span>&nbsp;|&nbsp;</span>
                <span>昨日&nbsp;</span><span style="font-size: 16px;font-weight:600;color: #6e6464dd;">{{formatSeconds(toDayInfo.yesterdayStudyTimeAvg)}}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="peopleTotal" style="background:#4cb97d57;" align="center">
                <img  style="width: 50px;height: 50px;margin-top: 15px;" src="../../assets/bussiness/home/peopleTime.png"/>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>

    <el-container  v-loading="loading">
      <el-main>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-size: 17px;">员工学习情况</span>
            <span style="float: right; padding: 0px 0;">
              <el-button  type="text">过去7天</el-button>
             <!-- <el-button  type="text">过去15天</el-button> -->
            </span>
          </div>
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <div ref= "SPChart" style="height: 550px; width: 100%"></div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <div ref= "STChart" style="height: 550px; width: 100%"></div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-main>
    </el-container>


    <el-container>
      <el-main>
        <el-row>
          <el-col :span="12">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>学时时长Top10</span>
                <!-- <el-button style="float: right; padding: 3px 0" type="text">过去30天</el-button>
                <el-button style="float: right; padding: 3px 0" type="text">昨天</el-button>
                <el-button style="float: right; padding: 3px 0" type="text">今天</el-button> -->
              </div>
               <div style="height: 500px;overflow-y: auto;">
                <el-row class="topCss title">
                  <el-col :span="2"><div>排名</div></el-col>
                  <el-col :span="6"><div>姓名</div></el-col>
                  <el-col :span="8"><div>部门</div></el-col>
                  <el-col :span="8"><div>学习时长</div></el-col>
                </el-row>
                <el-row class="topCss" v-for="(item,index) in top10List" :key="index">
                  <el-col :span="2" v-if="index===0"><img class="imageCss" src="../../assets/bussiness/home/1.png"/></el-col>
                  <el-col :span="2" v-else-if="index===1"><img class="imageCss" src="../../assets/bussiness/home/2.png"/></el-col>
                  <el-col :span="2" v-else-if="index===2"><img class="imageCss" src="../../assets/bussiness/home/3.png"/></el-col>
                  <el-col :span="2" v-else><div class="otherCss">{{index+1}}</div></el-col>
                  <el-col :span="6"><div>{{item.user_name}}</div></el-col>
                  <el-col :span="8"><div>{{item.deptName}}</div></el-col>
                  <el-col :span="8"><div>{{formatSeconds(item.personTotal)}}</div></el-col>
                </el-row>
               </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card"  style="margin-left: 10px;">
              <div slot="header" class="clearfix">
                <span>课程分类占比</span>
               <!-- <el-button style="float: right; padding: 3px 0" type="text">&nbsp;</el-button> -->
              </div>
              <div class="grid-content bg-purple-light">
                <div ref= "CKChart" style="height: 500px; width: 100%"></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import { employeeStudyInfo,studyTimeTop10,courseTypeStatistic,toDayStudyInfo } from '@/api/business/home'
  import {formatSeconds} from '@/utils/index'
  export default {
    mixins: [],
    props: {

    },
    data() {
      return {
        top10List:null,
        toDayInfo:{},
        loading:false,
      }
    },
    beforeInit() {

    },
    created() {
      this.$nextTick(() => {
        this.getToDayStudyInfo()
        this.getEmployeeStudyInfo()
        this.getStudyTimeTop10()
        this.getCourseTypeStatistic()
      })
    },
    mounted() {
      //this.initSPEcharts();
      //this.initSTEcharts();
      //this.initCKEcharts();
    },
    methods:{
      formatSeconds,
      getToDayStudyInfo(){
        this.loading=true
        toDayStudyInfo().then(res=>{
          this.toDayInfo=res
          setTimeout(()=>{
            this.loading=false
          },500)

        })
      },
      getStudyTimeTop10(){
        studyTimeTop10().then(res=>{
          this.top10List=res;
        })
      },
      getCourseTypeStatistic(){//课程分类统计
        courseTypeStatistic().then(res=>{
          var total=0;
          var data=[];
          if(res!=null && res!=""){
            data=res;
            res.forEach(obj=>{
              total+=obj.value;
            })
          }
          this.initCKEcharts(total,data);
        })
      },
      getEmployeeStudyInfo(){//员工学习情况
        employeeStudyInfo().then(res=>{
          //学习时间
          var studyTime=res.studyTime;
          var time=[]
          var timeValue=[]
          studyTime.forEach(obj=>{
            time.push(obj.nowDate)
            timeValue.push(obj.studyNum);
          })
          this.initSTEcharts(time,timeValue);
          //学习人数
          var studyPerson=res.studyPerson;
          var person=[]
          var personValue=[]
          studyPerson.forEach(obj=>{
            person.push(obj.nowDate)
            personValue.push(obj.studyNum);
          })
          this.initSPEcharts(person,personValue);
        })
      },
      initSPEcharts(person,personValue) {
        var option = {
          title: {
              text: '学习人数',
              x:'center',
              textStyle:{
                fontSize: 13
              }
          },
          color: ['#0068B6'],
          xAxis: {
              type: 'category',
              data: person
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: personValue,
              type: 'bar',
              barWidth: 30,
              itemStyle: {
                  normal: {
                  barBorderRadius: [20],
                      label: {
                          show: true, //开启显示
                          position: 'top', //在上方显示
                          textStyle: { //数值样式
                              color: 'black',
                              fontSize: 12
                          }
                      }
                  }
              }
          }]
        };
        this.chart = echarts.init(this.$refs.SPChart)
        this.chart.setOption(option)
      },
      initSTEcharts(time,timeValue) {//学习时长
        var option = {
          title: {
              text: '学习时长(分钟)',
              x:'center',
              textStyle:{
                fontSize: 13
              }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#e34621'
              }
            }
          },
          xAxis: {
            type: 'category',
            data: time
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: timeValue,
              type: 'line',
              smooth: true
            }
          ]
        };
        this.chart = echarts.init(this.$refs.STChart)
        this.chart.setOption(option)
      },
      initCKEcharts(total,data) {//课程分类
        var option = {
          title: {
                  text: total,
                  subtext: '总课程数',
                  textStyle:{
                    fontSize: 28,
                    color:'rgba(218, 0, 0, 0.8)'
                  },
                  x: 'center',
                  y: 'center'
             },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '课程类型',
              type: 'pie',
              radius: ['30%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              // emphasis: {
              //   label: {
              //     show: true,
              //     fontSize: 25,
              //     fontWeight: 'bold'
              //   }
              // },
              labelLine: {
                show: false
              },
              data: data
            }
          ]
        };
        this.chart = echarts.init(this.$refs.CKChart)
        this.chart.setOption(option)
      },
    }
  }
</script>
<style>
  .el-main {
      background-color: #f2f6fc85;
      color: #333;
      //text-align: center;
      margin: 5px;
    }
    .box-card .clearfix span{
      font-weight: 800;
    }
    .topCss{
      margin: 10px;
      height: 33px;
      line-height: 33px;
      text-align: center;
    }
    .imageCss{
      height: 24px;
      width: 24px;
      margin-top: 5px;
    }
    .otherCss{
        height: 24px;
        width: 24px;
        background: #de8c4f8a;
        line-height: 25px;
        border-radius: 50%;
        color: white;
        margin: 5px auto;
    }
    .title{
      font-weight: 800;
    }
    .peopleTotal{
      text-align: center;
      width: 79px;
      height: 79px;
      background: #E8F1FF;
      margin: 50px auto;
      border-radius: 50%;
    }
    .redClass{
      color: red;
    }
    .greenClass{
      color: #67c23a;
    }
</style>
